<template>
  <div class="mwDetailBox">
    <div class="topBox">
      <p>初步研判</p>
      <a-icon
        type="close"
        @click="onClose"
        :style="{ fontSize: '16px', color: '#525252', float: 'right', margin: '10px' }"
      />
    </div>
    <div class="box box1">
      <a-row style="margin-bottom:10px;">
        <a-col :span="24">
          <span>模型名称：</span><span>{{ rowData.modelName }}</span>
        </a-col>
      </a-row>
      <a-row style="margin-bottom:10px;">
        <a-col :span="24">
          <span>情报更新时间：</span><span>{{ rowData.updateTime }}</span>
        </a-col>
      </a-row>
    </div>
    <div class="box box2">
      <p>情报规则:</p>
      <a-row style="margin-bottom:10px;">
        <a-col :span="24">
          <a-input class="input" :disabled="true" v-model="modelRule.inDays" />天内有<a-input
            class="input"
            :disabled="true"
            v-model="modelRule.days"
          />天连续出入
          <template v-if="modelRule.areas != undefined">
            <a-tag v-for="(item, index) in modelRule.areas" :key="index">{{ item.areaName }}</a-tag> </template
          >，且消费短信金额属于<a-input
            class="input"
            :disabled="true"
            v-model="amountType"
          />且工作及居住地不在此区域的人员
        </a-col>
      </a-row>
    </div>
    <div class="box box3">
      <p>基本信息:</p>
      <a-row style="margin-bottom:10px;">
        <a-col :span="10">
          <span>手机号：</span><span>{{ rowData.phone }}</span>
        </a-col>
        <a-col :span="14">
          <span>归属地：</span><span>{{ rowData.phoneArea }}</span>
        </a-col>
      </a-row>
    </div>
    <div class="box box4">
      <a-tabs default-active-key="1" @change="onChange">
        <a-tab-pane key="1" tab="轨迹记录">
          <p style="color:#13C2C2">轨迹信息</p>
          <CustomTable
            ref="table1"
            :showAlert="false"
            :columns="columns1"
            :dataSource="pageData1"
            :loading="loading1"
            :showSelection="false"
            :showPagination="true"
            rowKey="id"
            @change="onTableChange1"
          >
            <template slot="action" slot-scope="text, record">
              <a @click="onViewLocation(record)" type="link" style="padding:0;">查看轨迹</a>
            </template>
          </CustomTable>
        </a-tab-pane>
        <a-tab-pane key="2" tab="消费记录" force-render>
          <CustomTable
            ref="table2"
            :showAlert="false"
            :columns="columns2"
            :dataSource="pageData2"
            :loading="loading2"
            :showSelection="false"
            :showPagination="true"
            rowKey="id"
            @change="onTableChange2"
          >
            <template slot="amountType" slot-scope="text">
              <span v-if="text == '1'">A类</span>
              <span v-if="text == '2'">B类</span>
              <span v-if="text == '3'">C类</span>
              <span v-if="text == '4'">D类</span>
            </template>
          </CustomTable>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
import * as api from '@/api/wxSmuggle/intelligence.js'
import CustomTable from '@/components/zxd/Table/CustomTable'
export default {
  props: ['visible'],
  components: {
    CustomTable
  },
  data() {
    return {
      pageFilter1: {
        pageNo: 1,
        pageSize: 10
      },
      pageFilter2: {
        pageNo: 1,
        pageSize: 10
      },
      pageData1: {},
      pageData2: {},
      columns1: [
        {
          title: '序号',
          dataIndex: 'order',
          align: 'center',
          width: 80,
          customRender: (text, record, index) =>
            `${(this.pageFilter1.pageNo - 1) * this.pageFilter1.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '出现时间',
          dataIndex: 'appearTime',
          align: 'center',
          // width: 110,
          scopedSlots: { customRender: 'appearTime' }
        },
        {
          title: '离开时间',
          dataIndex: 'disappearTime',
          align: 'center',
          // width: 110,
          scopedSlots: { customRender: 'disappearTime' }
        },
        {
          title: '出现区域',
          dataIndex: 'posName',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'posName' }
        },
        {
          title: '操作',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          // slots: { title: 'customIsAction' },
          scopedSlots: { customRender: 'action' }
        }
      ],
      columns2: [
        {
          title: '序号',
          dataIndex: 'order',
          align: 'center',
          // width: 80,
          customRender: (text, record, index) =>
            `${(this.pageFilter2.pageNo - 1) * this.pageFilter2.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '区域位置',
          dataIndex: 'gatewayPosName',
          align: 'center',
          // width: 100,
          scopedSlots: { customRender: 'gatewayPosName' }
        },
        {
          title: '消费时间',
          dataIndex: 'createTime',
          align: 'center',
          // width: 110,
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: '消费金额类别',
          align: 'center',
          dataIndex: 'amountType',
          // width: 100,
          scopedSlots: { customRender: 'amountType' }
        }
      ],
      loading1: false,
      loading2: false,
      rowData: {},
      modelRule: {},
      amountType: ''
    }
  },
  mounted() {
    // this.refreshTable()
  },
  methods: {
    // tabs切换
    onChange(e) {
      if (e === '1') {
        this.refreshTable1()
      } else {
        this.refreshTable2()
      }
    },
    onViewLocation(row) {
      let arr1 = []
      row.posTraceUli.forEach((item, index) => {
        arr1.push({
          key: index,
          appearTime: row.appearTime,
          longitude: item.longitude,
          latitude: item.latitude,
          address: row.posName
        })
      })
      let arr = [{ list: arr1 }]
      // 绘制轨迹
      this.$emit('on-task-details-drawer', arr)
    },
    show(row) {
      this.pageFilter1.id = row.id
      this.pageFilter2.id = row.id
      this.rowData = row
      this.modelRule = row.modelRule
      if (this.modelRule.amountType == '1') this.amountType = 'A类'
      if (this.modelRule.amountType == '2') this.amountType = 'B类'
      if (this.modelRule.amountType == '3') this.amountType = 'C类'
      if (this.modelRule.amountType == '4') this.amountType = 'D类'
      this.refreshTable1()
    },
    refreshTable1() {
      this.pageFilter1.type = 1
      this.loading1 = true
      api
        .crypoIntellDetail(this.pageFilter1)
        .then(res => {
          if (res.success) {
            this.pageData1 = res.result
            this.loading1 = false
            // this.$refs.table.onClearRowKeys()
          } else {
            this.loading1 = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    refreshTable2() {
      this.pageFilter2.type = 2
      this.loading2 = true
      api
        .crypoIntellDetail(this.pageFilter2)
        .then(res => {
          if (res.success) {
            this.pageData2 = res.result
            this.loading2 = false
          } else {
            this.loading2 = false
          }
        })
        .catch(e => {
          this.loading2 = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange1(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter1 = Object.assign({}, this.pageFilter1, paginations)
      this.refreshTable1()
    },
    onTableChange2(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter2 = Object.assign({}, this.pageFilter2, paginations)
      this.refreshTable2()
    },
    onClose(value) {
      this.$emit('close', value)
    }
    // onClickRow(row, n) {
    //   this.active = n
    //   this.$emit('on-click-row', row)
    // },
  }
}
</script>

<style lang="less" scoped>
.mwDetailBox {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 600px;
  background-color: #fff;
  .topBox {
    background-color: #f2f2f2 !important;
    overflow: hidden;
    p {
      float: left;
      color: #000;
      padding: 15px 10px 0;
      font-weight: 500;
      font-size: 16px;
      // line-height: 22px;
    }
    /deep/.anticon {
      float: right;
      margin: 10px;
    }
  }
  .box {
    padding: 0 10px;
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    p {
      font-weight: bold;
    }
    span {
      color: #000;
    }
  }
  .add-box {
    position: absolute;
    right: 10px;
    top: 100px;
  }
}
.editable-row-operations {
  a {
    color: #108de9;
  }
}
.input {
  width: 60px;
  margin: 5px 6px;
}
/deep/.ant-col-15 {
  width: 65%;
}
// .py_list_drawer tr:hover > td {
//   cursor: !important;
// }
// .mwDetailTable .spanBtn {
//   width: 100%;
//   display: inline-block;
//   cursor: pointer;
// }
</style>
